<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div id="father">-->
<!--    <h1>标题1</h1>-->
<!--</div>-->

<!--<p id="p1">p1</p>-->
<!--<p class="p2">p2</p>-->
<script>
    //通过标签名, id, class 三种方式获取标签。三个结果都是object
    // let elementsByTagName = document.getElementsByTagName('h1');
    // let elementById = document.getElementById('p1');//常用
    // let elementsByClassName = document.getElementsByClassName('p2');
    //
    // // let father = document.getElementById("father");
    // //
    // // father.children;//返回所有子节点
    //
    // var p1 = document.getElementById('p1');
    // var father = p1.parentElement;
    // father.removeAttribute(p1);//移除p1
    // father.removeChild(p1);//或者这样删除
    //
    //
    //
    //
    // p1.innerText = "zhourui";//修改内部值
    // p1.innerHTML = '<strong>123</strong>';//添加可解析的HTML文本
    // //修改css
    // p1.style.color = "red";
</script>
<p id="js">js</p>
<div id="list">
    <p id="java">java</p>
    <p id="python">python</p>
    <p id="c">c</p>
</div>
<script>
    let js = document.getElementById("js");
    let list = document.getElementById("list");
    list.append(js);//追加节点, js不在前面, 直接被移到后面了
    let newP = document.createElement("p");//创建一个p标签
    newP.id = 'newP';//newP.setAttribute('id', 'newP');等同, 更公用
    newP.innerText = 'hello zhourui';//给这个新建的节点添加了内容
    list.append(newP);//追加我们上面创建的标签。

    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');//给我们创建的节点添加属性

</script>
</body>
</html>